<template>
	<view class="page">
		<!--顶部搜索  -->
		<view class="head">
			<image class='headSearch' src='../../../../static/icons/jewel/search.png'></image>
			<input class='headInput' @confirm="search_keyword" placeholder-style='font-size:22rpx;' placeholder='请输入珠宝名称' />
			</input>
			<!-- #ifdef MP-WEIXIN -->
				<button class='open_contact' open-type="contact">
					<text class="iconfont icon-daipingjia"></text>
				</button>
			<!-- #endif -->
		</view>
		
		<view class="categorys-cont">
			<!--左侧分类按钮  -->
			<scroll-view scroll-y id='Left' v-bind:style="{height: scrollHeight + 'px',paddingBottom: '50px'}">
				<view :class="[index==actIndex ? 'cateBtn actCateBtn' : 'cateBtn']" :data-index="index" v-for="(item, index) in category_data" :key="index" @click="tapCate" @tap="tapCate">{{item.name}}</view>
			</scroll-view>
			<!--右侧分类  -->
			<scroll-view scroll-y id='Right' v-bind:style="{height: scrollHeight + 'px',paddingBottom: '50px'}">
				<view :class="[index==actIndex ? 'show_view' : 'hide_view']" v-for="(item, index) in category_data" :key="index">
					<image class="cate-img" :src="item.banner_text" mode="widthFix"></image>
					<view class='cateBox'>
						<view class="_child_view" v-for="(val, key) in item._child" :key="key">
							<navigator open-type="navigate" class='cateItem' :url="'/pages/jewel/agent/goods/prolist?cat_id=' + val.id+ '&maker_num=' + maker_num" v-if="val._child == null">
								<image :src="val.thumb_text"></image>
								<view class='cateName'>{{val.name}}</view>
							</navigator>
							<view class="second_cateName" v-else>
								{{val.name}}
							</view>
							<navigator open-type="navigate" class='cateItem' :url="'/pages/jewel/agent/goods/prolist?cat_id=' + v.id + '&maker_num=' + maker_num" v-for="(v, k) in val._child" :key="k">
								<image :src="v.thumb_text"></image>
								<view class='cateName'>{{v.name}}</view>
							</navigator>
							
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="m-loading" v-if="bIsShowLoading">
		    <image src="../../../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
		<tabbar :route_key="route_key"></tabbar>
	</view>
</template>

<script>
	import henglang from '@/common/common_zb.js';
	import tabbar from '@/components/ctabbar.vue';
	export default {
		data() {
			return {
				scrollHeight: 0, // 屏幕高度
				actIndex: 0, // 当前点击的分类id
				category_data: [],
				bIsShowLoading: false,
				route_key: '0',
				maker_num:0
			}
		},
		components: {
			tabbar
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({
				success: function (res) {
					that.scrollHeight = res.windowHeight
				}
			});
		},
		onLoad({maker_num}) {
			let that = this;
			let url,data;
			that.bIsShowLoading = true;
			that.maker_num = maker_num
			if(that.maker_num == 3){
				url = 'goods/getGoodsCategory'
				data = {is_maker:that.maker_num}
			}else{
				url = 'pick/getGoodsCategory'
				data = {}
			}
			henglang.get(url,data, false, function(res){
				that.category_data = res.data.data;
				that.bIsShowLoading = false;
			})
			
		},
		methods: {
			tapCate(e) {
				let index = e.currentTarget.dataset.index;
				this.actIndex = index;
			},
			search_keyword (e){
				let goods_name = e.target.value;
				let url = '/pages/jewel/agent/goods/prolist?goods_name=' + goods_name + '&maker_num=' + this.maker_num;
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style>
	.page {
		background: #ffffff;
		font-size: 27rpx;
		color: #555;
		height: 100vh;
	}
	/*顶部搜索  */
	.head {
		width: 750rpx;
		height: 50px;
		box-sizing: border-box;
		padding: 17rpx 15rpx 17rpx 23rpx;
		position: relative;
		background: #fff;
		padding-bottom: 2rpx;
		border-bottom: 1rpx solid #ccc;
	}

	.headSearch {
		width: 20px;
		height: 20px;
		position: absolute;
		top: 32rpx;
		left: 50rpx;
		z-index: 9;
	}

	.headInput {
		width: 618rpx;
		height: 35px;
		display: inline-block;
		background: #efefef;
		box-sizing: border-box;
		padding-left: 90rpx;
		vertical-align: middle;
		border-radius: 5px;
	}

	::-webkit-input-placeholder {
		font-size: 30rpx;
	}

	.headIcon {
		width: 50rpx;
		height: 50rpx;
		vertical-align: middle;
		margin-left: 26rpx;
	}
	.categorys-cont{
		display: flex;
		align-items: flex-start;
	}
	/*左侧分类按钮  */
	#Left {
		width: 178rpx;
		border-right: 1px solid #CCCCCC;
	}

	#Left .cateBtn {
		width: 178rpx;
		height: 92rpx;
		line-height: 92rpx;
		text-align: center;
	}

	.cate-img {
		width: 90%;
		border-radius: 5px;
		margin: 5%;
	}

	#Left .actCateBtn {
		background: #fff;
		box-sizing: border-box;
		color: #dbb867;
		position: relative;
	}

	#Left .actCateBtn::after {
		content: '';
		display: block;
		width: 6rpx;
		height: 30rpx;
		background: #dbb867;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
	._child_view{
		display: inline-block;
		border-bottom: 1px solid #f2f2f2;
		padding-bottom: 20upx;
		margin-bottom: 20upx;
	}
	/*分类右侧  */
	#Right {
		width: 572rpx;
		background: #fff;
		float: right;
	}

	#Right .cateBox {
		width: 572rpx;
		box-sizing: border-box;
		padding: 10rpx 38rpx 20rpx 18rpx;
	}

	.cateItem {
		width: 172rpx;
		height: 200rpx;
		display: inline-block;
		text-align: center;
	}

	.cateItem image {
		margin-top: 28rpx;
		width: 150rpx;
		max-height: 150rpx;
	}

	.cateItem .cateName {
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		color: #333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.open_contact {
		border: none !important;
		display: initial;
		padding-left: 0px;
		padding-right: 0px;
		overflow: auto;
		text-align: left;
		line-height: 1.25;
		background: none !important;
		position: absolute;
		right: 20px;
		top: 10px;

	}

	.open_contact text {
		font-size: 25px;
	}

	.open_contact::after {
		content: none
	}

	.none {
		width: 100px;
		height: 120px;
		position: absolute;
		top: 20%;
		left: 30%;
	}
	.show_view{
		display: block;
	}
	.hide_view{
		display: none;
	}
</style>
